<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画板</title>
    <style>
        *{
            user-select: none;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="300" style="background-color: black;"></canvas><br />

    画笔颜色：<input type="color" id="color" /> <br /><br />
    背景颜色：<input type="color" id="back" /> <br /><br />
    画笔粗细：<input type="number" id="line" value="4" min="1" max="100" /><br /><br />
    <br /><br />
    
    <button>导出图片</button>
</body>
</html>
<script>
    var canvas = document.getElementById('canvas')

    var ctx = canvas.getContext('2d')

    var oldX = oldY = 0
    var lineColor = 'white'
    var lineWidth = 4
    var isDraw = false

    canvas.addEventListener('mousedown', down, false)
    canvas.addEventListener('mouseup', up, false)
    canvas.addEventListener('mousemove', move, false)

    function down(e)
    {
        e.preventDefault()

        oldX = e.pageX - 10
        oldY = e.pageY - 10

        isDraw = true
    }

    function up(e)
    {
        e.preventDefault()
        isDraw = false
    }

    function move(e)
    {
        e.preventDefault()
        
        if(isDraw)
        {
            var newX = e.pageX - 10
            var newY = e.pageY - 10

            ctx.beginPath()
            ctx.moveTo(oldX, oldY)
            ctx.lineTo(newX, newY)

            ctx.lineWidth = lineWidth
            ctx.strokeStyle = lineColor
            ctx.lineCap = 'round'

            ctx.stroke()
            
            ctx.closePath()
        }
        oldX = newX
        oldY = newY
    }
    var color = document.getElementById('color')
    var back = document.getElementById('back')
    var line = document.getElementById('line')

    color.onchange = function()
    {
        lineColor = this.value
    }
    
    back.onchange = function()
    {
        canvas.style.backgroundColor = this.value
    }

    line.onchange = function()
    {
        lineWidth = parseInt(this.value)
    }


    
</script>